<template>
  <div>
    <el-dialog
      v-if="visible"
      :visible="visible"
      :width="dialogWidth"
      :extra-data="extraData"
      append-to-body
      @close="handlClose"
    >
      <template slot="title">
        <div style="display: flex;align-items: center;">
          <span style="font-size: 18px;font-weight: bold;">{{ title }}</span>
          <span v-if="extraData">
            <span style="font-size: 14px;padding-left: 20px;color: red;">{{ extraData.title }}</span>
          </span>
        </div>
      </template>

      <ele-steps
        :active="currentStep"
        :steps="['下载模板', '上传文件', '确认数据', '完成']"
        :steps-attrs="{
          'align-center': true
        }"
      />
      <!-- 下载模板 -->
      <ele-import-download
        v-if="currentStep === 1"
        :filepath="filepath"
      />

      <!-- 上传Excel -->
      <ele-import-upload
        v-if="currentStep === 2"
        :fields="fields"
        :tips="tips"
        @upload="handleUpload"
      />

      <!-- 数据展示 -->
      <ele-import-data
        v-if="currentStep === 3"
        :append="append"
        :fields="fields"
        :formatter="formatter"
        :request-fn="requestFn"
        :rules="rules"
        :table-data="tableData"
        @pre="handleStep3Pre"
      />

      <!-- 导入结束 -->
      <ele-import-finish
        v-if="currentStep === 4"
        @finish="handleFinish"
      />
    </el-dialog>
  </div>
</template>

<script>
import EleSteps from 'vue-ele-steps'
import EleImportDownload from 'vue-ele-import/src/components/EleImportDownload.vue'
import EleImportUpload from 'vue-ele-import/src/components/EleImportUpload.vue'
import EleImportData from 'vue-ele-import/src/components/EleImportData.vue'
import EleImportFinish from 'vue-ele-import/src/components/EleImportFinish.vue'

export default {
  name: 'EleImport',
  components: {
    EleSteps,
    EleImportData,
    EleImportUpload,
    EleImportFinish,
    EleImportDownload
  },
  props: {
    // 文件路径
    filepath: {
      type: String,
      required: true
    },
    // 请求方法
    requestFn: {
      type: Function,
      required: true
    },
    // 导入字段
    fields: {
      type: Object,
      required: true
    },
    // 是否显示弹窗
    visible: {
      type: Boolean,
      required: true
    },
    // 标题
    title: {
      type: String,
      default: '批量导入'
    },
    // 额外数据
    extraData: {
      type: Object,
      default: null
    },
    // 增加附加数据
    append: Object,
    // 提示信息，数组
    tips: Array,
    // 验证规则
    rules: Object,
    // 格式化数据
    formatter: {
      type: Object,
      validator(formatter) {
        for (var key in formatter) {
          if (!(formatter[key] instanceof Object)) {
            // eslint-disable-next-line
              console.error(`${key}的值必须为 对象 或 函数`)
            return false
          }
        }
        return true
      }
    },
    // 弹窗宽度
    dialogWidth: {
      type: String,
      default: '80%'
    }
  },
  provide() {
    return {
      goPre: this.preStep,
      goNext: this.nextStep
    }
  },
  data() {
    return {
      tableData: [],
      columns: [],
      currentStep: 1
    }
  },
  mounted() {},
  methods: {
    // 上传
    handleUpload(columns, tableData) {
      this.columns = columns
      this.tableData = tableData
    },
    // 初始化数据
    initData() {
      this.tableData = []
      this.columns = []
      this.currentStep = 1
    },
    // 关闭
    handlClose() {
      this.initData()
      this.$emit('close')
      this.$emit('update:visible', false)
    },
    // 结束
    handleFinish() {
      this.handlClose()
      this.$emit('finish')
    },
    // 下一步
    nextStep() {
      this.currentStep++
    },
    // 上一步
    preStep() {
      this.currentStep--
    },
    // 第3步 -> 第2步
    handleStep3Pre() {
      this.tableData = []
      this.columns = []
      this.preStep()
    }
  }
}
</script>

  <style>
  .ele-import-action {
    margin-top: 20px;
    text-align: center;
  }
  </style>

